// main.js
import './style.css';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature'; // 添加此行
import Point from 'ol/geom/Point'; // 添加此行
import { Style, Icon } from 'ol/style'; // 修改此行
import Vector from 'ol/source/Vector'; // 确保正确引用
import Fill from 'ol/style/Fill'
import CircleStyle from 'ol/style/Circle'
import Text from 'ol/style/Text'
import { LineString } from 'ol/geom';
import VectorSource from 'ol/source/Vector'
import Stroke from 'ol/style/Stroke.js';


const view = new View({
  center: [114.25, 30.59],
  zoom: 6,
  projection: "EPSG:4326"
});

// 高德地图底图
const gaodeSource = new XYZ({
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
});
const gaodeLayer = new TileLayer({
  source: gaodeSource
});

const map = new Map({
  target: 'map',
  view,
  layers: [gaodeLayer]
});

const lineFeature = new Feature({
  geometry: new LineString([[114.25, 30.59], [116.46, 39.92]])
})
lineFeature.setStyle(new Style({
  stroke: new Stroke({
    color: 'yellow',
    width: 5
  })
}))
const vectorSource = new VectorSource({
  features: [lineFeature]
})
const vectorLayer = new VectorLayer({
  source: vectorSource
})
map.addLayer(vectorLayer)